<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-card>
      <el-row :gutter="6">
        <span>批量打回轨迹</span>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="6">
        <el-form
          ref="orderForm"
          :model="orderData"
          size="mini"
          label-width="60px"
        >
          <el-col :span="4">
            <el-form-item label="渠道" prop="inStockChannel">
              <el-select
                v-model="orderData.inStockChannel"
                placeholder="请选择渠道"
                multiple
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in inStockChannelOptions"
                  :key="v"
                  :label="v"
                  :value="parseInt(k)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="仓库代码" prop="dispatchAddressCode">
              <el-input
                v-model="orderData.dispatchAddressCode"
                placeholder="请输入仓库代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="派送方式" prop="trackNumber">
              <el-input
                v-model="orderData.trackNumber"
                placeholder="请输入派送方式"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客户" prop="customerShortName ">
              <el-input
                v-model="orderData.customerShortName"
                placeholder="请输入客户"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="orderData.status"
                placeholder="请选择状态"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in statusOptions"
                  :key="k"
                  :label="m(statusOptions[v])"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="销售" prop="salesmanId">
              <el-select
                v-model="orderData.salesmanId"
                placeholder="请选择销售"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in userOptions"
                  :key="k"
                  :label="userOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客服" prop="servicesId">
              <el-select
                v-model="orderData.servicesId"
                placeholder="请选择客服"
                clearable
                filterable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in userOptions"
                  :key="k"
                  :label="userOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="运单号" prop="waybillNos">
              <el-input
                v-model="orderData.waybillNos"
                type="textarea"
                placeholder="请输入运单号"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="分单号" prop="fbaNo">
              <el-input
                v-model="orderData.fbaNo"
                type="text"
                placeholder="请输入分单号"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="initPageData"
              >
                搜索
              </el-button>
              <el-button type="primary" size="mini" @click="reset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card>
      <el-row :gutter="2">
        <el-form ref="remarkForm" :model="remarkData" size="mini">
          <el-col :span="4">
            <el-form-item label="">
              <el-button
                type="primary"
                size="mini"
                @click="batchWaybillMergeTrackBack"
              >
                批量打回轨迹
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>

    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="waybillNo" label="运单号" width="180">
        </el-table-column>
        <el-table-column prop="status" label="当前状态" width="180">
          <template slot-scope="scope">
            {{ statusMap[scope.row.status] }}</template
          >
        </el-table-column>
        <el-table-column prop="inStockTotalPackages" label="件数" width="180">
        </el-table-column>
        <el-table-column prop="inStockChannel" label="渠道">
          <template slot-scope="scope">
            {{ inStockChannel[scope.row.inStockChannel] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="dispatchAddressCode"
          label="仓库代码"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="trackNumber" label="派送方式" width="180">
        </el-table-column>
        <el-table-column prop="customerId" label="客户名称">
          <template slot-scope="scope">
            {{ customerOptions[scope.row.inStockChannel] }}
          </template>
        </el-table-column>
        <el-table-column prop="salesmanId" label="销售" width="180">
          <template slot-scope="scope">
            {{ userOptions[scope.row.salesmanId] }}
          </template>
        </el-table-column>
        <el-table-column prop="servicesId" label="客服" width="180">
          <template slot-scope="scope">
            {{ userOptions[scope.row.servicesId] }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { m } from "@/store/yg/common/local";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      inStockChannel: "",
      tableData: [
        {
          waybillNo: "",
          inStockTotalPackages: 0,
          inStockChannel: 0,
          dispatchAddressCode: "",
          trackNumber: "",
          customerId: "",
          salesmanId: "",
          servicesId: ""
        }
      ],
      orderData: {
        inStockChannel: [],
        dispatchAddressCode: "",
        trackNumber: "",
        customerShortName: "",
        salesmanId: "",
        servicesId: "",
        waybillNos: "",
        waybillId: 0,
        status: "",
        fbaNo: ""
      },
      remarkData: {
        sysRemark: "",
        receiveType: [],
        synTrace: 0,
        urgencytype: 0
      },
      optionsData: {},
      customerOptions: {},
      statusOptions: {},
      inStockChannelOptions: {},
      userOptions: {},
      multipleSelection: [],
      statusMap: {} //运单状态
    };
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    const a = this.init();
    this.initCustomerOptions("customerSource");
    const a1 = await this.initUserOptions("userSource");
    const aa = this.initChannelOptions("customerChannelSource");
    this.initPageData();
    this.initStatusOptions("waybillStatusSource");
  },
  methods: {
    m(key) {
      return m(key);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    reset() {
      this.orderData = {};
    },
    init() {
      return 1;
    },
    async initCustomerOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.customerOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
      // console.log('res>>>',res);
    },

    async initUserOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      const res = await axios.post(constant.API_SERVER + uri).then(
        response => {
          this.userOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    initChannelOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.inStockChannelOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
      return "aa";
    },

    initStatusOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.statusOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },

    batchWaybillMergeTrackBack() {
      var param = [];
      var selected = this.$refs.multipleTable.selection;
      for (var index in selected) {
        param.push(selected[index].id);
      }
      console.info(param);
      ajax("batchWaybillMergeTrackBack", param).then(
        res => {
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("打回轨迹失败!");
            }
          } else {
            this.$message.success("打回轨迹成功!");
            this.centerDialogVisible = false;
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    initPageData() {
      var param = {};
      param = this.orderData;
      param["id"] = this.$route.query.waybillId;
      ajax("batchWaybillMergeTrackBackPage", param).then(
        res => {
          if (res.code != 200) {
          } else {
            debugger;
            this.tableData = res.data.simpleWaybillQueries;
            this.statusMap = res.data.statusMap;
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}
</style>
